iT邦幫忙

2021 iThome 鐵人賽

DAY 24
0
自我挑戰組

30天小老闆系列(1)--線上排班小工具系列 第 24

DAY24 搞樣式--用CSS Gird來搞個萬年曆吧(上)

  • 分享至 

  • xImage
  •  

前言

今天開始實作的部分,嘗試用完全沒碰過的CSS Grid要搞出一個萬年曆,不停的研究不停地開發新事物就是工程師有趣的地方吧!所以為此還是努力的試試看~

今天就先來釐清我的想法,怎樣排出我想要的面板

我的需求應該是:

  • 一個7(天)*5(週)的表格
     外加一個首行,可以放星期一~星期日這個標題(所以是7*6)

  • 首行不用太高,其餘5行(週)要高一點,而且要等高

  • 5行(週)要可以每天都塞排班人員進去
    因為排班人員不確定有幾個,所以高度要彈性
    但是為了版面的和諧,應該超過三個就會變點選"點我看更多"的彈跳視窗來顯示
    預計每一格最多顯示2人,剩下的就彈跳視窗

  • 非本月日期要disabled樣式
    因為不可能剛好1號是星期一,所以月曆上通常會有上個月幾天、跟下個月幾天,要換樣式

以上大概就是本次實做月曆的需求,以這樣為出發點開始設計


上一篇
DAY23 搞樣式--CSS Gird小進階(間隔/fr)
下一篇
DAY25 搞樣式--用CSS Gird來搞個萬年曆吧(下)
系列文
30天小老闆系列(1)--線上排班小工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言